<!DOCTYPE HTML>
<html>
<head>
<script src="../resources/js-test.js"></script>
<script src="../http/tests/resources/pointer-lock/pointer-lock-test-harness.js"></script>
</head>
<body>
<div>
  <div id="target1"></div>
</div>
<script>
    description("Test locking an element not in a document is rejected and pointerlockerror event dispatched.")
    window.jsTestIsAsync = true;

    targetDiv1 = document.getElementById("target1");
    let error_code;

    todo = [
        function () {
            shouldNotBe("targetDiv1.parentElement", "null");
            expectOnlyErrorEvent("Remove targetDiv1 from document, and try to lock it.");
            targetDiv1.parentElement.removeChild(targetDiv1);
            shouldBe("targetDiv1.parentElement", "null");
            let request_promise = targetDiv1.requestPointerLock();
            request_promise.catch(error => {
                error_code = error.code;
                shouldBe("error_code", "4", "Should reject with a WrongDocumentError");
            });
            // doNextStep called by event handler.
        },
    ];
    doNextStepWithUserGesture();
</script>
</body>
</html>
